<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main" />
    <gui:resources components="['dataTable','datePicker']"/>
    <title>DataTable Demo</title>
</head>

<body>
<h1>GrailsUI DataTable Demo</h1>

<h2>Using Type Formatters and Key:Label Shortcuts</h2>
    <gui:dataTable
        draggableColumns="true"
        columnDefs="[
            [id:'Id', sortable:true, resizeable: true],
            [name:'Name', sortable:true, resizeable: true],
            [birthDate:'Birth Date', formatter:'date', sortable:true, resizeable: true],
            [age:'Age', formatter:'number', sortable:true, resizeable: true],
        ]"
        sortedBy='name'

        controller="demo" action="dataTableDataAsJSON"
        caption="click on a row, and it will expand"
        paginate="true"
        rowExpansion="false"
        rowsPerPage="40"
        totalRecordsKey="meTotalRecs"
    />

    <br/><br/>

<h2>Data Table with custom params, custom paginator config, row click navigatyion, and JSON root</h2>
    <gui:dataTable
            caption="Click row to navigate"
            draggableColumns="true"
            id="dt_2"
            columnDefs="[
                [key:'id', sortable:true, resizeable: true, label:'ID'],
                [key:'name', sortable:true, resizeable: true, label:'Name'],
                [key:'birthDate', sortable:true, resizeable: true, label: 'Birth Date'],
                [key:'age', sortable:true, resizeable: true, label: 'Age'],
                [key:'netWorth', sortable:true, resizeable: true, label: 'Net Worth']
            ]"
            paginatorConfig="[
                template:'{PreviousPageLink} {PageLinks} {NextPageLink} {CurrentPageReport}',
                pageReportTemplate:'{totalRecords} total records'
            ]"
            controller="demo" action="nonStandardDataTableDataAsJSON"
            params="[maxAge:52]"
            resultsList="myResults"
            rowClickNavigation="true"
            collapseOnExpansionClick="true"
            rowsPerPage="3"
    />

<br/><br/>
<script>

  var failureCallback = function(responseObject) {
    alert('Failed.');
  }
  var successCallback = function(responseObject) {
    alert('Successful.');
  }
</script>

<h2>Standard Data Table with cell formatting</h2>
<h5 style="color:grey"">* to trigger callback failure, set Name to blank.</h3>
    <gui:dataTable
        draggableColumns="true"
        id="dt_3"
        columnDefs="[
            [id:'ID', formatter:'text', sortable:true, resizeable: true],
            [name:'Name', formatter:'text',
                editor:[controller:'demo', action:'tableChange',onSuccess:'successCallback',onFailure:'failureCallback'],
                sortable:true, resizeable: true],
            [birthDate:'Birth Date', formatter:'date',
                editor:[controller:'demo', action:'tableChange', config:[disableBtns:true]],
                sortable:true, resizeable: true],
            [age:'Age', formatter:'number',
                editor:[type:'dropdown', controller:'demo', action:'tableChange',
                    config:[dropdownOptions: (21..50), disableBtns:true]],
                sortable:true, resizeable: true],
            [netWorth:'Net Worth', formatter:'currency', sortable:true, resizeable: true],
            [isDumb:'Some Flag', sortable:true, resizeable: true],
            [favoriteColors:'Favorite Colors',
                editor:[type:'checkbox', controller:'demo', action:'tableChange', config:[checkboxOptions:['red','yellow','blue']]],
                sortable:true, resizeable: true],
            [gender:'Gender',
                editor:[type:'radio', controller:'demo', action:'tableChange', config:[radioOptions:['male','female']]],
                sortable:true, resizeable: true],
            [radio:'Radio format', formatter:'radio', sortable:true, resizeable: true],
            [drop:'Drop Down', formatter:'dropdown', dropdownOptions:['apple','banana','orange','peach'], sortable:true, resizeable: true]
        ]"
        allowExclusiveSort='true'
        controller="demo" action="dataTableDataAsJSON"
        rowsPerPage="15"/>

        <br/><br/>
</body>
</html>
